<template>
  <el-container style="height: 1000px; border: 1px solid #eee">
    <el-main>
      <router-view/>
      <el-container style="height: 900px">
        <el-aside style="height:750px; border:1px solid #eee; background-color: #f6f6f6">
          <el-row>
            <div style="width: 100%;height: 120px;align-content: center;padding-top: 20px">
              <el-avatar :src="'https://images.996pic.com/7021030b0ad843b9ab92571845d88fd1680_680.jpg'" :size="100"
              ></el-avatar>
            </div>
            <div style="width: 100%;height: 30px;align-content: center;">
              <p class="name">{{userName}}</p>
            </div>
          </el-row>
          <el-row style="height:100px"/>
          <el-row>
            <div style="width: 100%;align-content: center;padding-bottom: 20px">
              <p style="font-family: 'Microsoft YaHei',sans-serif;color: gray;font-size: 12px;font-weight: lighter;">综合评分</p>
              <el-rate v-model="star"
                       disabled
                       show-score
                       text-color="#ff9900"
                       score-template="{value}"></el-rate>
            </div>
          </el-row>
          <el-row>
            <div style="width:100%; background-color: #2c3e50; color: #ffffee; border:0">
              <p class="title2">咨询状态</p>
              <p class="digit2">{{ consultStatus }}</p>
            </div>
          </el-row>
          <el-menu background-color="#2c3e50" text-color="#ffffee"  style="height: 170px">
            <el-menu-item index="1" @click="stopEvent()">
              <template #title>离开咨询</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-header height="60px" style="text-align: left;background-color: #f6f6f6;padding-left: 30px">
            <p class="title1">
              <el-dropdown>
              <i class="el-icon-setting"></i>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="this.chatName='qwx123';this.mList=[];
                  this.nextReqMessageID='';this.isCompleted=false;getMess(15,chatName,'')">qwx123</el-dropdown-item>
                  <el-dropdown-item @click="this.chatName='mentor';this.mList=[];
                  this.nextReqMessageID='';this.isCompleted=false;getMess(15,chatName,'')">mentor</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>{{'咨询师'+chatName}}</p>
          </el-header>
          <el-main>
            <el-row>
              <!-- 求助区 -->
              <el-col :span="12">
                <span style="width: 150px"><el-button type="text" @click="getMoreMess(chatName)">查看更多</el-button></span>
                <el-table id="eltable" :show-header="false" :data="mList" :height="450">
                  <el-table-column prop="message" align="left" >
                    <template #default="scope" >
                      <span style="font-size: 12px;color:gray;font-weight: lighter" v-if="scope.row.message!==''">  {{scope.row.time}}</span>
                      <el-row>
                        <el-avatar :src="'https://images.996pic.com/7021030b0ad843b9ab92571845d88fd1680_680.jpg'" v-if="scope.row.message!==''"></el-avatar>
                        &nbsp; &nbsp;
                        <el-card class="box-class" style="max-width: 150px;--el-card-padding:10px;--el-card-border-radius: 12px;
                    background-color: rgba(21,157,255,0.4)" v-if="scope.row.message!=='' && scope.row.type === 'text'">
                          {{scope.row.message}}
                        </el-card>
                        <el-card class="box-class" style="max-width: 150px;--el-card-padding:10px;--el-card-border-radius: 12px;" v-else-if="scope.row.message!==''  && scope.row.type === 'pic'">
                          <el-image :src="scope.row.message" @click="zoomout(scope.row.message)"></el-image>
                        </el-card>
                      </el-row>
                    </template>
                  </el-table-column>
                  <el-table-column prop="mine">
                    <template #default="scope" style="float: right">
                      <el-row style="height:10px"><span v-if="false">abcd</span></el-row>
                      <el-row style="float: right">
                        <el-card class="box-class" style="max-width: 150px;--el-card-padding:10px;--el-card-border-radius: 12px;" v-if="scope.row.mine!==''  && scope.row.type === 'text'">
                          {{scope.row.mine}}
                        </el-card>
                        <el-card class="box-class" style="max-width: 150px;--el-card-padding:10px;--el-card-border-radius: 12px;" v-else-if="scope.row.mine!==''  && scope.row.type === 'pic'">
                          <el-image :src="scope.row.mine" @click="zoomout(scope.row.mine)"></el-image>
                        </el-card>
                        &nbsp; &nbsp;
                        <el-avatar :src="'https://images.996pic.com/7021030b0ad843b9ab92571845d88fd1680_680.jpg'" v-if="scope.row.mine!==''"></el-avatar>
                      </el-row>
                    </template>
                  </el-table-column>
                </el-table>
                <el-row>
                  <textarea
                      placeholder="请输入消息内容，最多可输入200个字"
                      v-model="textarea"
                      maxlength="200"
                      @keydown="messageSendlisten"
                      style="width: 100%;height: 150px"
                  ></textarea>
                </el-row>
                <el-button @click="setButton" type="primary" style="float: right">发送</el-button>
                <el-button @click="handleSendImageClick" type="primary" plain icon="el-icon-picture-outline" style="float: right">图片</el-button>&nbsp;
                <input
                    type="file"
                    id="imagePicker"
                    ref="imagePicker"
                    accept=".jpg, .jpeg, .png, .gif, .bmp"
                    @change="sendImage"
                    style="display:none"
                />
              </el-col>
              <!-- 同步区 -->
              <el-col :span="12">
                <el-table id="eltable2" :show-header="false" :data="mList3" :height="650">
                  <el-table-column prop="message" align="left" >
                    <template #default="scope" >
                      <el-row>
                        <el-avatar :src="'http://img.meituan.net/avatar/8e121229f5fbde1040d0969a095afdbf49867.jpg'" v-if="scope.row.message!==''"></el-avatar>
                        &nbsp; &nbsp;
                        <el-card class="box-class" style="max-width: 150px;--el-card-padding:10px;--el-card-border-radius: 12px;
                          background-color: rgba(21,157,255,0.4)" v-if="scope.row.message!=='' && scope.row.type === 'text'">
                          {{scope.row.message}}
                        </el-card>
                        <el-card class="box-class" style="max-width: 150px;--el-card-padding:10px;--el-card-border-radius: 12px;
                        background-color: rgba(21,157,255,0.4)" v-else-if="scope.row.message!==''  && scope.row.type === 'pic'">
                          <el-image :src="scope.row.message"></el-image>
                        </el-card>
                      </el-row>
                    </template>
                  </el-table-column>
                  <el-table-column prop="mine">
                    <template #default="scope" style="float: right">
                      <el-row align="right" style="float: right">
                        <el-card class="box-class" style="max-width: 150px;--el-card-padding:10px;--el-card-border-radius: 12px;" v-if="scope.row.mine!==''  && scope.row.type === 'text'">
                          {{scope.row.mine}}
                        </el-card>
                        <el-card class="box-class" style="max-width: 150px;--el-card-padding:10px;--el-card-border-radius: 12px;" v-else-if="scope.row.mine!==''  && scope.row.type === 'pic'">
                          <el-image :src="scope.row.mine"></el-image>
                        </el-card>
                        &nbsp; &nbsp;
                        <el-avatar :src="'https://images.996pic.com/7021030b0ad843b9ab92571845d88fd1680_680.jpg'" v-if="scope.row.mine!==''"></el-avatar>
                      </el-row>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-dialog
                title="图片预览"
                v-model="dialogVisible3"
                width="60%"
            >
              <el-image :src="imageZoom" :fit="'fit'"></el-image>
            </el-dialog>

            <!-- <div class="t_limit">当前还可发送{{200-(textarea.length)}}个字</div> -->

          </el-main>
        </el-container>

      </el-container>


    </el-main>
  </el-container>
</template>

<script>
import tim from '../../tim'
import TIM from 'tim-js-sdk/tim-js-friendship.js'
const circleUrl = 'https://images.996pic.com/7021030b0ad843b9ab92571845d88fd1680_680.jpg'
function sleep(delay) {
  for(let t = Date.now(); Date.now() - t <= delay;);
}
function offTime (value) {
  var v = value;
  var date = new Date(v * 1000);
  var Y = date.getFullYear() + "-";
  var M =
      (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
  var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var h =
      (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
  var m =
      date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  let dt = new Date(Date.parse(new Date()));
  let current = dt.getFullYear() + "-" + dt.getMonth() + "-" + dt.getDate();
  let system = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate();
  if (current === system) {
    return h + m;
  } else {
    return M + D;
  }
}
export default {
  name: "TutorChat",
  data(){
    return{
      dialogVisible3:false,
      imageZoom:'',
      h:0,//定义时，分，秒，毫秒并初始化为0；
      m:0,
      s:0,
      ms:0,
      time:0, //定时器
      str:'00:00:00',
      times:'', //统计共多少分钟时间
      dialogVisible:false,
      userId:'',
      userName:'',
      chatNick:'',
      star:4.7,
      defaultAvatar:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1651318081,2860235060&fm=26&gp=0.jpg", //默认头像,如果用户没有上传头像或者头像路径错误展示这个路径
      myAvatar:
          "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2519824424,1132423651&fm=26&gp=0.jpg", //我的头像
      chatName: "", //查看的某个人name
      syncFrom:'qwx123',
      syncTo:'qwx124',
      conversationID2:'',
      consultStatus:'帮助中',
      toUserId: "", //查看的某个人id
      avatar: "", //查看的某个人avatar
      lookup: "", //用户查找的名字
      isActive: "1",
      loading: false, //加载中
      textarea: "", //输入信息
      rListOff: false,
      rRightOff: false,
      // emojiMap: emojiMap,
      // emojiUrl: emojiUrl,
      rList: [], //会话列表
      hList: [], //具体信息
      mList:[],
      mList2:[],
      mList3:[],
      ishelping:true,
      nextReqMessageID:'',
    }
  },
  methods: {
    zoomout(url){
      const _this = this
      _this.dialogVisible3 = true
      _this.imageZoom = url
    },
    start(){  //开始
      this.time=setInterval(this.timer,50);
    },

    stop(){  //暂停
      this.consultStatus = "帮助结束"
      clearInterval(this.time);
    },
    reset(){  //重置
      clearInterval(this.time);
      this.h=0;
      this.m=0;
      this.ms=0;
      this.s=0;
      this.str="00:00:00";
    },
    timer(){                //定义计时函数
      this.ms=this.ms+50;        //毫秒
      if(this.ms>=1000){
        this.ms=0;
        this.s=this.s+1;        //秒
      }
      if(this.s%4===0){
        this.consultStatus="帮助中"
      }else if (this.s%4===1){
        this.consultStatus = "帮助中."
      }else if (this.s%4===2){
        this.consultStatus = "帮助中.."
      }else {
        this.consultStatus = "帮助中..."
      }
    },
    toDub(n){  //补0操作
      if(n<10){
        return "0"+n;
      }
      else {
        return ""+n;
      }
    },
    async stopEvent(){
      this.stop()

      this.$router.push('/mentor/me').then(_=>{
        this.$router.go(0)
      })
    },
    handleSendImageClick() {
      this.$refs.imagePicker.click()
    },
    sendImage() {
      const _this = this
      const message = this.tim.createImageMessage({
        to: _this.chatName,
        conversationType: this.TIM.TYPES.CONV_C2C,
        payload: {
          file: document.getElementById('imagePicker') // 或者用event.target
        },
        onProgress: function(event) { console.log('file uploading:', event) }
      })


      this.tim
          .sendMessage(message)
          .then(() => {
            _this.mList.push({message:'',mine:message.payload.imageInfoArray[0].imageUrl,type:'pic'})
          })
          .catch(imError => {

          })
      this.below()
    },
    //消息查看更多

    //自动保持在最底部
    below() {
      this.$nextTick(() => {
        let container = this.$el.querySelector("#eltable .el-table__body-wrapper");
        container.scrollTop = container.scrollHeight;
      });
    },
    //回车发送文本 阻止浏览器默认换行操作
    messageSendlisten(event) {
      if (event.keyCode === 13) {
        this.setButton(); // 发送文本
        event.preventDefault(); // 阻止浏览器默认换行操作
        return false;
      }
    },
    //消息已读
    read(id) {
      let promise = this.tim.setMessageRead({ conversationID: id });
      promise
          .then(function (imResponse) {
            // 已读上报成功，指定 ID 的会话的 unreadCount 属性值被置为0
          })
          .catch(function (imError) {
            // 已读上报失败
            console.warn("setMessageRead error:", imError);
          });
    },
    //发送消息
    setButton() {
      const self = this;
      if (self.textarea.split(" ").join("").length === 0)
        return this.$message({
          message: "请输入正确信息",
          type: "warning",
        });
      let message = this.tim.createTextMessage({

        to: self.chatName,
        // to: "youqianchengjin_" + self.userIdMsg,
        conversationType: this.TIM.TYPES.CONV_C2C,
        payload: {
          text: self.textarea,
        },

      });
      let cvtMessage = message.payload.text
      self.mList.push({message:'',mine:cvtMessage,type:'text'})
      // 发送消息
      let promise = tim.sendMessage(message);
      promise
          .then(function (imResponse) {
            // 发送成功
            self.textarea = "";
            console.log("success")

            // self.hList.messageList.push(imResponse.data.message);
            self.below();
          })
          .catch(function (imError) {
            // 发送失败
            console.warn("sendMessage error:", imError);
          });
    },

    getMess(count, chatName, nextSeq) {
      const _this = this
      let promise2 = tim.getMessageList({
        conversationID: 'C2C' + chatName,
        nextReqMessageID:nextSeq,
        count: 15,
      });
      promise2.then(function (imResponse) {
        let tempList=[]
        for (const item of imResponse.data.messageList) {
          let m = ''
          let time = offTime(item.time)
          if (item.type === "TIMImageElem"){
            let m = item.payload.imageInfoArray[0].imageUrl
            if (item.from === chatName) {
              tempList.push({time:time,message: m, mine: '',type:'pic'})
            } else {
              tempList.push({time:time,message: '', mine: m,type:'pic'})
            }
          }else{
            if (item.cloudCustomData === 'user') {
              continue
            } else if (item.cloudCustomData === 'consultant') {
              continue
            } else if (item.cloudCustomData === 'askhelp') {
              m = '----督导介入---- : '
            } else {
              m = item.payload.text
            }
            if (item.from === chatName) {
              tempList.push({time:time,message: m, mine: '',type:'text'})
            } else {
              tempList.push({time:time,message: '', mine: m,type:'text'})
            }
          }
        }
        tempList = tempList.concat(_this.mList)
        _this.mList = tempList
        _this.nextReqMessageID = imResponse.data.nextReqMessageID
        _this.isCompleted = imResponse.data.isCompleted
        console.log(imResponse)
      });
    },
    getMoreMess(chatName){
      const _this = this
      if (_this.isCompleted===false){
        _this.getMess(15,chatName,_this.nextReqMessageID)
      }
    },
    //获取会话列表


    handleClose() {
      let promise = this.tim.logout();
      this.dialogVisible = false;
      promise
          .then(function (imResponse) {
            console.log(imResponse.data);
          })
          .catch(function (imError) {
            console.warn("logout error:", imError);
          });
    },
  },
  created(){
    const userId = window.sessionStorage.getItem('userid')
    this.userId = userId
    const userSig = window.sessionStorage.getItem('usersig')
    this.chatName = ''
    const _this = this
    _this.consultStatus = "帮助中"
    _this.start()
    _this.userName = window.sessionStorage.getItem('name')
    let promise = tim.login({userID:userId,userSig:userSig})
    _this.chatName = _this.$route.query.chatName
    promise.then((imResponse)=>{
      console.log(imResponse.data);
    }).catch((imError)=>{
      console.warn(imError)
    })
    tim.on(TIM.EVENT.SDK_READY, function(event) {
      tim.getUserProfile({userIDList:[_this.chatName]}).then(imResponse=>{
        _this.chatNick = imResponse.data[0].nick
      })
      let promise2 = tim.getMessageList({
        conversationID: 'C2C' + _this.chatName,
        nextReqMessageID:'',
        count: 15,
      });
      promise2.then(function (imResponse) {
        let tempList=[]
        console.log(imResponse.data.messageList)
        for (const item of imResponse.data.messageList) {
          let m = ''
          let time = offTime(item.time)
          if (item.type === "TIMImageElem"){
            let m = item.payload.imageInfoArray[0].imageUrl
            if (item.from === _this.chatName) {
              tempList.push({time:time,message: m, mine: '',type:'pic'})
            } else {
              tempList.push({time:time,message: '', mine: m,type:'pic'})
            }
          }else if(item.type === 'TIMTextElem'){
            if (item.cloudCustomData === 'user') {
              continue
            } else if (item.cloudCustomData === 'consultant') {
              continue
            } else if (item.cloudCustomData === 'askhelp') {
              m = '----督导介入---- : '
            } else {
              m = item.payload.text
            }
            if (item.from === _this.chatName) {
              tempList.push({time:time,message: m, mine: '',type:'text'})
            } else {
              tempList.push({time:time,message: '', mine: m,type:'text'})
            }
          }
        }
        tempList = tempList.concat(_this.mList)
        _this.mList = tempList
        _this.nextReqMessageID = imResponse.data.nextReqMessageID
        _this.isCompleted = imResponse.data.isCompleted
        _this.below()
      });

    });


    let onMessageReceived = function(event) {
      //在用户交流时督导预存消息维护一个预存数组，当求助发生时，预存数组立马将
      let time = offTime(event.data[0].time)
      if (event.data[0].type === 'TIMImageElem'){
        _this.mList.push({time:time,message:event.data[0].payload.imageInfoArray[0].imageUrl,mine:'',type:'pic'})
      }
      else{
        if(event.data[0].cloudCustomData==='user'){
          if(_this.ishelping){
            _this.mList3.push({message:event.data[0].payload.text,mine:'',type:'text'})
          }
          else{
            console.log('user say')
            _this.mList2.push({message:event.data[0].payload.text,mine:'',type:'text'})
          }
        }else if(event.data[0].cloudCustomData==='consultant'){
          if(_this.ishelping){
            _this.mList3.push({message:'',mine:event.data[0].payload.text,type:'text'})
          }else{
            console.log('consultant say')
            _this.mList2.push({message:'',mine:event.data[0].payload.text,type:'text'})
          }
        }else if(event.data[0].cloudCustomData==='askhelp'){
          _this.ishelping = true
          _this.mList3 = _this.mList2
        }
        else{
          if(event.data[0].payload.text==='--求助完成--'){
            _this.stop()
          }
          _this.mList.push({time:time,message:event.data[0].payload.text,mine:'',type:'text'})
        }
      }
      _this.below()

      console.log(event)

      // event.data - 存储 Message 对象的数组 - [Message]
    };
    tim.on(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);


  },
  mounted() {
  },
  destroyed() {
    // 离开页面退出当前账号
    let promise = this.tim.logout();
    // promise
    //   .then(function (imResponse) {
    //     console.log(imResponse.data);
    //   })
    //   .catch(function (imError) {
    //     console.warn("logout error:", imError);
    //   });
  },
}
</script>

<style scoped>
  .name{
    font-family: "Microsoft YaHei",sans-serif;
    font-size: 20px;
    font-weight: bold;
  }
  .digit2 {
    font-family: "Microsoft YaHei",sans-serif;
    font-weight: bold;
    color: white;
    font-size: 48px;
    line-height:2.0;
  }
  .title1 {
    font-family: "PingFang SC",sans-serif;
    font-size: 16px;
    color: #000000;
    font-weight: normal;
    padding-top: 5px;
    padding-bottom: 0px;
  }
  .title2 {
    font-family: "PingFang SC",sans-serif;
    font-size: 16px;
    color: white;
    line-height: 1.0;
    font-weight: normal;
  }
  .message-area{
    background-color: #ffffee;
    height: 300px;
    border: 5px #cccccc;

  }
  .el-table{
    --el-table-border: 0px;
    --el-table-row-hover-background-color: none;
  }


</style>

<style scoped lang="scss">
.el-table__row>td{
  border: none;
}
@mixin toCla {
  color: #a5b5c1;
  font-size: 12px;
}
@mixin toClb {
  display: inline-block;
  > div:nth-child(1):before {
    content: "";
    width: 0px;
    height: 0px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;

    position: absolute;
    top: 10px;
    font-size: 7px;
  }
  > div:nth-child(2) {
    color: #a5b5c1;
    font-size: 12px;
    margin-top: 9px;
  }
  > div:nth-child(1) {
    outline: none;
    font-size: 14px;
    position: relative;
    max-width: 350px;
    word-wrap: break-word;
    word-break: break-all;
    background: #fff;
    border-radius: 5px;
    display: inline-block;
    padding: 10px;
    -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
    margin-top: 20px;
  }
}
.box {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  margin-top: 2%;
  display: flex;
  // -moz-box-shadow: 2px 2px 5px #333333;
  // -webkit-box-shadow: 2px 2px 5px #333333;
  //box-shadow: 1px 1px 1px #333333;
  border: 1px solid #3d3d3d;
  position: relative;
  .t_left {
    width: 260px;
    height: 600px;
    overflow: auto;
    border-right: 1px solid #e5e5e5;
    .seek {
      overflow: hidden;
      background: red;
      position: absolute;
      width: 256px;
      z-index: 9;
      top: 0;
      left: 0;
    }
    .t_left_bot {
      // padding-top: 36px;
      overflow: auto;
      background: #3d3d3d;
      > div {
        width: 100%;
        height: 80px;
        background: #3333;
        border-bottom: 1px solid #e5e5e5;
        cursor: pointer;
        position: relative;
        div:nth-child(5) {
          position: absolute;
          width: 18px;
          height: 18px;
          line-height: 18px;
          text-align: center;
          font-size: 11px;
          top: 4px;
          left: 58px;
          color: #fff;
          background: red;
          border-radius: 50%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        div:nth-child(4) {
          position: absolute;
          width: 80px;
          font-size: 14px;
          top: 15px;
          left: 169px;
          color: #999;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: right;
        }
        div:nth-child(3) {
          position: absolute;
          width: 163px;
          font-size: 14px;
          top: 45px;
          left: 83px;
          color: #999;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        div:nth-child(2) {
          position: absolute;
          width: 90px;
          font-size: 16px;
          top: 13px;
          left: 83px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #ffffff;
        }
        img {
          width: 60px;
          height: 60px;
          position: absolute;
          top: 10px;
          left: 10px;
          border-radius: 2px;
        }
      }
    }
  }
  .t_right {
    flex: 1;
    background: #ffffff;

    .t_right_bot {
      border-top: 1px solid #e5e5e5;
      height: 139px;
      width: 750px;
      background: #fff;
      position: relative;
      ::v-deep .t_limit {
        position: absolute;
        right: 93px;
        bottom: 17px;
        color: #b2b2b2;
      }
      ::v-deep textarea {
        resize: none;
        height: 100px;
        border: 0;
        width: 96%;
        display: block;
        margin: 0 auto;
        outline: none;
      }
      .r_i {
        position: absolute;
        right: 12px;
        bottom: 7px;
        color: #fff;
      }
      > div:nth-child(1) {
        display: flex;
        align-items: center;
        .icture_a {
          display: inline-block;
          cursor: pointer;
          position: relative;
          margin-left: 5px;

          ::v-deep .el-popover {
            width: 400px !important;
            height: 160px !important;
            overflow: auto !important;
          }
        }
        .icture {
          width: 30px;
          height: 30px;
          display: inline-block;
          margin: 4px 15px;
          cursor: pointer;
          overflow: hidden;
          position: relative;
        }
        input[type="file"] {
          color: transparent;
        }
        input {
          cursor: pointer !important;
          position: absolute;
          top: 0;
          left: 0;
          width: 30px;
          height: 30px;
          opacity: 0;
        }
        ::v-deep i {
          font-size: 27px;
        }
      }
    }
    .t_right_con {
      height: 410px;
      overflow: auto;
      .t_r_nmore {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-size: 13px;
        color: #a5b5c1;
        background: 0 0;
        padding-left: 0;
        padding-right: 0;
        cursor: pointer;
      }
      .t_r_more {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-size: 13px;
        color: #409eff;
        background: 0 0;
        padding-left: 0;
        padding-right: 0;
        cursor: pointer;
      }
    }

    .t_right_top {
      padding: 0 20px;
      color: #1c2438;
      font-size: 18px;
      font-weight: bold;
      line-height: 50px;
      text-shadow: #76828c 0 0 0.1em;
    }
    .hList-left {
      width: 100%;
      position: relative;
      overflow: auto;
      .hlAva {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: block;
        display: inline-block;
        margin: 10px 20px;
        vertical-align: top;
      }
      .hList-left-b {
        text-align: right;
        > div:nth-child(2) {
          @include toCla;
        }
        > div:nth-child(1) {
          @include toClb;
          > div:nth-child(1):before {
            border-top: 7px solid transparent !important;
            border-bottom: 7px solid transparent !important;
            border-left: 7px solid #fff !important;
            right: -7px !important;
          }
        }
      }
      .hList-left-a {
        > div:nth-child(3) {
          @include toCla;
        }
        > div:nth-child(2) {
          @include toClb;
          > div:nth-child(1):before {
            left: -7px !important;
            border-right: 7px solid #fff !important;
          }
        }
      }
    }
  }
  .active {
    transition: 300ms;
    background: #d6d6d6 !important;
  }
}

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  border-radius: 10px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
}
</style>